<template>
    <div class="settings-main-box" v-loading="loading">
      <el-form label-position="left" label-width="80px" :model="info" class="settings-form-box">
        <el-form-item label="">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:8000/api/user/1/"
            name="file"
            type="file"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="imgPreview">
            <img v-if="info.header_image" :src="info.header_image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="info.nickname" class="settings-short-input"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="info.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="info.tel" class="settings-short-input" placeholder="您还未绑定手机号码"></el-input>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input type="textarea" v-model="info.sign" maxlength="50" clearable  :autosize="{ minRows: 4, maxRows: 6}" placeholder="您还未写个人简介，写点什么吧！"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="saveInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
  import {getUser,updateUser} from "../../api/user";
  import {mapMutations} from 'vuex'

  export default {
      name: "index",
      data(){
        return{
          info:{
            nickname:'',
            sex:'',
            header_image:'',
            sign:'',
            tel:'',
          },
          imgFile:'',   //头像文件
          loading:false,
        }
      },
      created(){
        this.loading=true;
        this.getUserInfo();
      },
      methods: {
        ...mapMutations('user', [
          'SET_header_image',
        ]),
        imgPreview(file){
          let vm=this;
          const isJPG = file.type === 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/gif';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是jpg,png,gif格式!');
          }
          else if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }else{
            this.info.header_image=URL.createObjectURL(file.raw);
            this.imgFile=file.raw;
          }
        },
        //获取用户信息
        getUserInfo(){
           getUser('').then(res=>{
             this.info=res.data;
             this.loading=false;
          }).catch(error=>{
             this.loading=false;
           })
        },
        saveInfo(){
          let vm=this;
          const formData = new FormData();
          formData.append('nickname',vm.info.nickname);
          formData.append('sex',vm.info.sex);
          formData.append('tel',vm.info.tel);
          formData.append('sign',vm.info.sign);
          if(vm.imgFile){
            formData.append('header_image',vm.imgFile);
          }
          updateUser(formData).then(res=>{
            if(vm.imgFile){
              vm.SET_header_image(vm.info.header_image);
            }
            vm.$message.success('修改成功!');
          }).catch(error=>{
            vm.$message.error('修改失败!');
          })
        }
      }
    }
</script>

<style lang="stylus" scoped>
@import "../../stylus/color.styl"

  .settings-main-box{
    max-width 600px!important
    width 100%
  }
  .settings-form-box{
    margin-top 20px
  }
  .settings-short-input{
    max-width 200px
  }

  //头像css
  .avatar-uploader{
    border: 1px dashed #d9d9d9;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
